<template>
  <div class="page-box">
    <!-- 头部区域 -->
    <tool-bar>
      <el-form :inline="true"
              size="small">
        <el-form-item label="广告位名称">
          <el-input v-model.trim="query.advposname"
                    placeholder="请输入广告位名称"
                    clearable
                    @clear="initData"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                    icon="el-icon-search"
                    @click="searchSubmit">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="searchCancel">重置</el-button>
        </el-form-item>
      </el-form>
    </tool-bar>

<!-- 自定义表格组件 -->
<custom-table  title="广告位信息"
              :btn-list="['export']"
              :list="list"
              @refresh="refreshListData"
              show-index
              :columns="columnsData"
              :loading="loading">
  <!-- 左侧自定义按钮 -->
  <template #btnbox>
     <el-button
          size="mini"
          plain
          type="primary"
          icon="el-icon-plus"
          @click="$refs.vinfo.isShow=true"
             v-permission="'ydd_advpos@add'"
          >{{ $t("base.add") }}</el-button>
  </template>
  <!-- 操作列 -->
  <template slot="action"
            slot-scope="scope">
    <el-button v-permission="'ydd_advpos@update'" @click="edit({...scope.row})"
              icon="el-icon-edit"
              type="primary"
              circle
              size="small"></el-button>
    <el-button v-permission="'ydd_advpos@del'"  @click="del(scope.row.id)"
              type="danger"
              icon="el-icon-delete"
              circle
              size="small"></el-button>
  </template>
</custom-table>

    <!-- 分页组件 -->
    <Pagination :total="total"
                :page.sync="page"
                :page-sizes="pageSizes"
                :limit.sync="limit"
                @pagination="paginationChange" />

    <!--  广告位添加/修改 -->
    <v-info ref="vinfo" @update-list="initData"></v-info>

  </div>
</template>

<script>
import vInfo from './components/info'
import { getListData, delData } from '@/api/adv/pos'
import list from '@/mixins/list'
// 默认查询参数
const defaultQuery = {
  advposdesc: '',
  advposname: ''
}
export default {
  name: 'posIndex',
  components: {
    vInfo
  },
  data () {
    return {
      // 查询参数
      query: { ...defaultQuery },
      // 表格显示数据
      columnsData: [
        { prop: 'advposname', label: '广告位名称' },
        { prop: 'advposdesc', label: '广告位描述' },
        { prop: 'advposnum', label: '广告图数量' },
        { prop: 'advpossize', label: '广告位尺寸' }
      ]
    }
  },
  mixins: [list],
  methods: {
    // 初始化数据
    async initData () {
      try {
        this.loading = true
        const { query, page, limit } = this
        const { data, count } = await getListData({ ...query, page, limit })
        this.list = data
        this.total = count
      } catch (error) {
        console.log(error)
      }
      this.loading = false
    },
    // 搜索提交
    searchSubmit () {
      this.page = 1
      this.initData()
    },
    // 搜索重置
    searchCancel () {
      this.page = 1
      this.query = { ...defaultQuery }
      this.initData()
    },
    // 删除
    async del (id) {
      try {
        await this.$confirm(this.$t('base.delConfimText'))
        await delData({ id })
        this.$message.success(this.$t('base.delSuccessText'))
        this.initData()
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>
<style scoped>
</style>
